<template>
	<div class="work-list">
		<el-card>
			<el-form :inline="true" :model="formInline" class="demo-form-inline" size="small">
				<el-form-item>
					<!-- <el-button type="primary" @click="addStudent">新增</el-button> -->
				</el-form-item>
				<el-form-item label="订单号">
					<el-input v-model="formInline.name" placeholder="订单号"></el-input>
				</el-form-item>
				<!-- <el-form-item label="学号">
                    <el-input v-model="formInline.number" placeholder="学号"></el-input>
                </el-form-item> -->
				<!--  <el-form-item label="班级">
                    <el-select v-model="formInline.region" placeholder="班级">
                    <el-option label="框架9班" value="9"></el-option>
                    <el-option label="框架10班" value="10"></el-option>
                    </el-select>
                </el-form-item> -->
				<el-form-item>
					<el-button type="primary" @click="onSubmit">查询</el-button>
				</el-form-item>
			</el-form>
			<!-- //.slice((currentPage-1)*pageSize,currentPage*pageSize) -->
			<el-table :data="tableData" border style="width: 100%">
				<el-table-column align="center" prop="orderId" label="订单号"></el-table-column>
				<el-table-column align="center" prop="goodsName" label="产品名称"></el-table-column>
				<!-- <el-table-column align="center" prop="imgUrl" label="产品外观"></el-table-column> -->
				<el-table-column align="center" prop="num" label="数量"></el-table-column>
				<el-table-column align="center" prop="price" label="价格"></el-table-column>

				<el-table-column align="center" prop="name" label="客户名"></el-table-column>
				<el-table-column align="center" prop="address" label="地址"></el-table-column>
				<el-table-column align="center" prop="tel" label="联系方式"></el-table-column>
				<el-table-column align="center" prop="orderState" label="订单状态"></el-table-column>
				<el-table-column align="center" label="操作">
					<template slot-scope="scope">
						<el-button type="primary" size="mini" icon="el-icon-edit" @click="updateInfo(scope.row)">
						</el-button>
						<el-button type="danger" size="mini" icon="el-icon-delete" @click="del(scope.row)"></el-button>
					</template>
				</el-table-column>
			</el-table>
			<!-- Table -->
			<el-dialog :title="state?'修改订单信息':'新增订单信息'" :visible.sync="dialogFormVisible" width="500px">
				<el-form :model="form">
					<el-form-item label="订单号" :label-width="formLabelWidth">
						<el-input v-model="form.orderId" autocomplete="true"></el-input>
					</el-form-item>
					<el-form-item label="产品名称" :label-width="formLabelWidth">
						<el-input v-model="form.goodsName" autocomplete="true"></el-input>
					</el-form-item>
					<el-form-item label="数量" :label-width="formLabelWidth">
						<el-input v-model="form.num" autocomplete="true"></el-input>
					</el-form-item>
					<el-form-item label="价格" :label-width="formLabelWidth">
						<el-input v-model="form.price" autocomplete="true"></el-input>
					</el-form-item>
					<!--  <el-form-item label="性别" :label-width="formLabelWidth">
                    <el-radio v-model="form.sex" label="1">男</el-radio>
                    <el-radio v-model="form.sex" label="2">女</el-radio>
                </el-form-item> -->
					<el-form-item label="客户名" :label-width="formLabelWidth">
						<el-input v-model="form.name" autocomplete="true"></el-input>
					</el-form-item>
					<el-form-item label="地址" :label-width="formLabelWidth">
						<el-input v-model="form.address" autocomplete="true"></el-input>
					</el-form-item>
					<el-form-item label="联系方式" :label-width="formLabelWidth">
						<el-input v-model="form.tel" autocomplete="true"></el-input>
					</el-form-item>
					<el-form-item label="订单状态" :label-width="formLabelWidth">
						<el-select v-model="form.orderState" placeholder="请选择订单状态">
							<el-option label="待付款" value="待付款"></el-option>
							<el-option label="待发货" value="待发货"></el-option>
							<el-option label="已发货" value="已发货"></el-option>
							<el-option label="待退货" value="待退货"></el-option>
							<el-option label="已完成" value="已完成"></el-option>

						</el-select>
					</el-form-item>
					<!-- <el-form-item label="状态" :label-width="formLabelWidth">
                    <el-input v-model="form.state" autocomplete="off"></el-input>
                </el-form-item> -->

				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button @click="dialogFormVisible = false">取 消</el-button>
					<el-button type="primary" @click="sure">确 定</el-button>
				</div>
			</el-dialog>

			<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
				:page-sizes="[10,20,30,40]" layout="total,sizes,prev, pager, next,jumper" :total="total">
			</el-pagination>
		</el-card>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				formInline: {
					user: '',
					region: ''
				},
				tableData: [],
				dialogFormVisible: false,
				form: {},
				formLabelWidth: '80px',
				state: false,
				total: 0,
				currentPage: 1, //当前页
				pageSize: 10, //每页显示条数
			}
		},
		created() {
			this.getDataList()
		},
		methods: {
			handleSizeChange(val) {
				this.pageSize = val
				this.currentPage = 1
				// console.log(`每页 ${val} 条`);
			},
			handleCurrentChange(val) {
				this.currentPage = val
				console.log(`当前页: ${val}`);
			},
			sure() {
				if (this.state) {
					var that = this;
					console.log(that.form)
					var id = that.form.userId
					axios.post('http://10.134.31.43:8081/updateUser', {
						
							"userId": id,
							"name": that.form.name,
							"address": that.form.address,
							"tel": that.form.tel,
						

						
							

					
					}).then(function(res) {
						// if (res.data == 1) {
						// 	that.dialogFormVisible = false;
						// 	that.$message({
						// 		message: '修改成功',
						// 		type: 'success',
						// 		duration: 1000
						// 	})
						// 	that.getDataList()
						console.log(res)
						// } else {
						// that.dialogFormVisible = false;
						// that.$message({
						// 	message: '修改失败',
						// 	type: 'failure',
						// 	duration: 1000
						// })

						// }

					}).catch(function(err) {
						console.log(res)
					}),
					axios.post('http://10.134.31.43:8081/updateOrder', {
						
						
						
					
						"orderId": that.form.orderId,
						"user": id,
						"num": that.form.num,
						"goodsName": that.form.goodsName,
						"price": that.form.price,
						"orderState": that.form.orderState
							
					
					
					}).then(function(res) {
						// if (res.data == 1) {
						// 	that.dialogFormVisible = false;
						// 	that.$message({
						// 		message: '修改成功',
						// 		type: 'success',
						// 		duration: 1000
						// 	})
						// 	that.getDataList()
						console.log(res)
						// } else {
						// that.dialogFormVisible = false;
						// that.$message({
						// 	message: '修改失败',
						// 	type: 'failure',
						// 	duration: 1000
						// })
					
						// }
					
					}).catch(function(err) {
						console.log(res)
					})
				} else {
					//新增
					// this.service.post('接口地址',this.form)
					// .then(res=>{

					// })
					// .catch(err=>{
					//     console.log(err)
					// })
				}
				this.dialogFormVisible = false;
					that.getDataList();
			},
			addStudent() {
				this.state = false
				this.form = {
					sex: '1'
				}
				this.dialogFormVisible = true
			},
			updateInfo(row) {
				this.state = true
				this.form = {
					...row
				}
				this.dialogFormVisible = true
				// console.log(row)
			},
			del(row) {
				// this.form = {
				// 	...row
				
				// }
				console.log(row)
				this.$confirm('您确定要删除吗？', '删除提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
				
					var that = this;
					alert(row.orderId)
					axios.get('http://10.134.31.43:8081/deleteOrder', {
					params: {
							orderId: row.orderId
						}
					}).then(function(res) {
						console.log(res.data)
						if (res.data == 1) {
				
							that.$message({
								message: '删除成功',
								type: 'success',
								duration: 1000
							})
							that.getDataList()
						} else {
				
							that.$message({
								message: '删除失败',
								type: 'failure',
								duration: 1000
							})
						}
				
					}).catch(function(err) {
						console.log(res)
					})
				
				
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},
			onSubmit() {
				var that = this;
				axios.get('http://10.134.31.43:8081/findOrder', {
					params: {
						orderId: that.formInline.name
					}
				}).then(function(res) {
					var order = []
					for (let i = 0; i < res.data.length; i++) {
						for (let j = 0; j < res.data[i].orderList.length; j++) {
							let table = {};
							Object.assign(table, res.data[i], res.data[i].orderList[j]);
							order.push(table)
						}

					}
					that.total = order.length
					that.tableData = order
				}).catch(function(err) {
					console.log(res)
				})
			},
			getDataList() {
				var that = this;
				axios.get('http://10.134.31.43:8081/findAllUserOrder').then(function(res) {
					console.log(JSON.stringify(res.data.length))

					var order = []
					for (let i = 0; i < res.data.length; i++) {
						for (let j = 0; j < res.data[i].orderList.length; j++) {
							let table = {};
							Object.assign(table, res.data[i], res.data[i].orderList[j]);
							order.push(table)
						}

					}
					that.total = order.length
					that.tableData = order
				}).catch(function(err) {
					console.log(res)
				})

			}

		}
	}
</script>
<style>
	.work-list {
		margin: 20px 0;
	}

	.el-form {
		text-align: left;
	}

	.el-select {
		width: 100%;
	}

	.el-pagination {
		padding-top: 20px;
	}
</style>
